<template>
	<view class="memos_box">
		<Tips/>
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower" >
			<MySteps 
				:color="stepColor(item)" 
				:active="compareDate(item.time,nowTime)===0" 
				v-for="item in memos"
				:key="item.id">
				<view class="duty_card" @click="clickMemoCardFun(item)">
					<uni-badge 
						class="uni-badge-left-margin" 
						:customStyle="{background: primary_hot_color}"
						:text="compareDate(item.time,nowTime)===0 ? '别忘了哦' : ''" absolute="rightTop" 
						:offset="[25, 15]" size="small">
						<MemoCard :memoData="item" />
					</uni-badge>
				</view>
			</MySteps>
			<view class="load_box">
				<uni-load-more :content-text="contentText" iconType="circle" :color="primary_hot_color" :status="loadingStatus" />
			</view>
			<view v-if="!memos.length">
				<MyNull img="nullMemo.png"/>
			</view>
		</scroll-view>
		<view class="add_duty" @click="openEditDuty">
			<MyIcons size="130rpx" :src="joinSystemPath('addNotice.png')"/>
		</view>
		<MyPopub height="220rpx" :isOpenPopub="openPopubFlag" :slotsNums="2">
			<template #1>
				<view class="pupub_item" @click="openEditMemoFun">
					重新编辑
				</view>
			</template>
			<template #2>
				<view class="pupub_item" @click="isDeleteMemo">
					删除
				</view>
			</template>
		</MyPopub>
		<MyModal :openModalFlag="modalIsEditMemoFlag" :okFun="submitMemoFun">
			<template #title>
				{{modalType}}备忘录
			</template>
			<template #content>
				<EditMemo :formData="editMemoFormData" @changeMemoFormEmit="changeMemoFormFun"/>
			</template>
		</MyModal>
		<MyModal :openModalFlag="modalIsDeleteMemoFlag" :okFun="submitDeleteMemoFun">
			<template #title>
				确定删除我的备忘录吗
			</template>
		</MyModal>
	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'

	import MySteps from '@/components/MySteps/MySteps.vue'
	import MemoCard from '@/components/Dormitory/MemoCard/MemoCard.vue'
	import EditMemo from '@/components/Dormitory/EditMemo/EditMemo.vue'
	import Tips from '@/components/Tips/Tips.vue'
	import MyNull from '@/components/MyNull/MyNull.vue'

	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	import {userStore} from '@/stores/user'

	import {
		DormitoryModel
	} from '@/service/model/dormitory.js'

	import {
		deleteStrByPatten,
		compareDate,
		toTime
	} from '@/utils/changeData.js'
	import {
		openMessageAuth
	} from '@/utils/messageAuth.js'
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'

	import {
		verifyIsLogin,
		verifyFormData
	} from '@/hooks/verify.js'
	import moment from 'moment'
	
	const user_store=userStore()

	const dynamicStyle_store = dynamicStyleStore()
	const dormitoryModel = new DormitoryModel()

	const {
		primary_hot_color,
		primary_light_color,
		shallow_text_color,
		primary_main_bgc
	} = dynamicStyle_store.dormitoryStyle

	const formData = ref({
		limit: 10,
		page: 0,
		orderBy: 'time.desc',
		user_id: '',
		timeStart:'2022-12-26',
		timeEnd:'2022-12-19'
	})
	const isAllowScroll=ref(true)

	const dormitoryAllId = uni.getStorageSync('homeData')

	const init=()=>{
		isAllowScroll.value=true
		loadingStatus.value = 'more'
		formData.value.page=0
		memos.value=[]
	}

	const memos = ref([])
	const nowTime = ref(0)
	//步骤条颜色
	const stepColor = (item) => {
		let color = ''
		if (compareDate(item.time,nowTime.value)===-1) {
			color = shallow_text_color
		} else if (compareDate(item.time,nowTime.value)===1) {
			color = primary_light_color
		} else {
			color = primary_hot_color
		}
		return color
	}
	
	const loadingStatus = ref('more')
	const contentText =ref({
		contentdown: '下滑加载更多',
		contentrefresh: '加载备忘录中',
		contentnomore: '没有更多备忘录了'
	})
	const getMemos = async () => {
		loadingStatus.value = 'loading'
		const {
			data,
			success
		} = await dormitoryModel.getMemos(formData.value, dormitoryAllId.dormitory_id)
		if (success) {
			data.map(item => {
				item.time = deleteStrByPatten(item.time, /:\d{2}:\d{2}/,':00')
			})
			memos.value = [...memos.value,...data]
			nowTime.value = deleteStrByPatten(toTime(Date.now()), /:\d{2}:\d{2}/,':00')
			if(!data.length || data.length<formData.value.limit){
				isAllowScroll.value = false
				loadingStatus.value = 'noMore'
			}else{
				loadingStatus.value = 'more'
			}
		}
	}
	
	const lower=()=>{
		if(!isAllowScroll.value) return
		formData.value.page++
		getMemos()
	}
	
	const modalType=ref('添加')
	//添加修改备忘录
	const modalIsEditMemoFlag=ref(0)
	const modalIsDeleteMemoFlag=ref(0)
	const openPopubFlag=ref(0)
	const editMemoFormData=ref({
		title:'',
		content:'',
		time:Date.now()
	})
	const editMemoFormDataSchema={
		time:{
			required:true,
			tip:'时间'
		},
		title:{
			required:true,
			tip:'标题'
		},
		content:{
			required:true,
			tip:'内容'
		}
	}
	//点击了备忘录卡片
	const chooseMemo=ref()
	const clickMemoCardFun=(item)=>{
		if(item.user.user_id !== user_store.userInfo.id){
			uni.$emit('tips','不能操作别人的备忘录','warn')
			return
		}
		chooseMemo.value = item
		openPopubFlag.value = Math.random()
	}
	const changeMemoFormFun=(e)=>{
		editMemoFormData.value = e
	}
	//添加备忘录
	const openEditDuty=()=>{
		editMemoFormData.value={
			title:'',
			content:'',
			time:Date.now()
		}
		modalType.value='添加'
		modalIsEditMemoFlag.value = Math.random()
	}
	//提交添加修改备忘录
	const submitMemoFun=async()=>{
		verifyFormData(editMemoFormData.value,editMemoFormDataSchema)
		editMemoFormData.value.time = moment(toTime(editMemoFormData.value.time)).format("YYYY-MM-DD HH:mm:ss")
		
		const {data,success} = modalType.value === '添加' ?
			await dormitoryModel.postAddMemo(editMemoFormData.value,dormitoryAllId.dormitory_id) :
			await dormitoryModel.patchMemo(editMemoFormData.value,chooseMemo.value.id)
		if(success){
			uni.$emit('tips',data,'success')
			openMessageAuth()
			init()
			getMemos()
		}
	}
	
	//验证是否操作的自己的备忘录
	const verifyIsMyMemo=()=>{
		if(chooseMemo.value.user.user_id!==user_store.userInfo.id){
			const tip = '请不要操作别人的备忘录'
			uni.$emit('tips',tip,'warn')
			throw new Error(tip)
		}
	}
	
	//编辑我的备忘录
	const openEditMemoFun=()=>{
		verifyIsMyMemo()
		modalType.value='编辑'
		openPopubFlag.value = -Math.random()
		modalIsEditMemoFlag.value = Math.random()
		const {
			title,content,time
		} = chooseMemo.value
		editMemoFormData.value = {title,content,time}
	}
	
	//确认删除备忘录
	const submitDeleteMemoFun=async()=>{
		const index = memos.value.findIndex(item=>item.id === chooseMemo.value.id)
		const {data,success} = await dormitoryModel.deleteMemo({},chooseMemo.value.id)
		if(success){
			uni.$emit('tips',data,'success')
			memos.value.splice(index,1)
		}
	}
	//是否删除备忘录
	const isDeleteMemo=()=>{
		verifyIsMyMemo()
		openPopubFlag.value = -Math.random()
		modalIsDeleteMemoFlag.value = Math.random()
	}

	onShow(() => {
		init()
		getMemos()
	})
</script>

<style lang="less">
	.memos_box {
		width: 94%;
		height: calc(100vh);
		padding: 20rpx;
		background-color: v-bind(primary_main_bgc);
		.scroll-Y{
			height: calc(99vh);
			.load_box{
				margin-bottom: 3%;
			}
		}
		.add_duty{
			width: 130rpx;
			height: 130rpx;
			position: fixed;
			bottom: 100rpx;
			right: 50rpx;
			z-index: 10;
			background-color: v-bind(primary_hot_color);
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.pupub_item{
			width: 100%;
			display: flex;
			justify-content: center;
		}
	}
</style>
